<template>
  <!-- 节点表单弹窗 -->
  <a-modal
    :title="headerTitle"
    :visible.sync="dialogVisible"
    @ok="handleOk"
    :confirmLoading="loading"
    @cancel="handleCancel"
    width="600px"
  >
    <!-- 表单 -->
    <a-form-model ref="ruleForm" :model="form" :rules="rules">
      <a-row :gutter="24">
        <a-col :md="24" :sm="24">
          <a-form-model-item
            prop="projectTypeName"
            label="工程分类名称"
            :labelCol="{ lg: { span: 5 }, sm: { span: 5} }"
            :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
          >
            <BaseInput :maxLength="30" v-model="form.projectTypeName" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import { projectType } from '@/api/quality/currency' // api

export default {
  name:'a'+ Date.now(),
  props: {
    // 显隐控件
    visible: {
      type: Boolean,
      default() {
        return false
      },
    },
    // 表单
    form: {
      type: [Object, String],
      default() {
        return {}
      },
    },
    // 标题
    headerTitle: {
      type: String,
      default() {
        return ''
      },
    },
  },
  computed: {
    // 与父组件绑定visible
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      },
    },
  },
  data() {
    return {
      loading: false, // 确定按钮 loading
      rules: {
        projectTypeName: [{ required: true, whitespace: true, message: '请填写工程分类名称', trigger: 'change' }]
      },
    }
  },
  methods: {
    // 确认提交
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$emit('confirm')
        } else {
          this.$message.warning("请填写完所有必填项信息")
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel() {
      this.dialogVisible = false
    },
  },
  watch: {
    visible(e) {
      if (!e) {
        // 初始化表单
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate()
        })
      }
    },
  },
}
</script>

<style>
</style>
